<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>闭包递归</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <script>
        window.onload = function(){
            /*
            闭包：能够读取其他函数内部变量的函数
                JS中每个函数都是个体，它可以获取父元素的信息，但父元素不能直接获取子元素的内容；
                关键点：是否引入了外部变量;
            */
            
            //闭包1
            function a(){
                var n = 0;
                function add(){
                    n++;
                    console.log(n);
                }
                add();
            };
            a();

            //闭包2
            function A1(){
                this.n = 0;
                this.add = function(){
                    this.n++;
                    console.log(this.n);
                }
            };
            var a2 = new A1();
            a2.add();

             //闭包3
            function a3(){
                var n = 0;
                function add(){
                    n++;
                    console.log('a3-n = '+n);
                };
                return add;//这里无括号，有括号表示调用
            };
            a3()();//双括号

             //闭包4
            var b = (function(){
                var n = 0;
                function add(){
                    n++;
                    console.log('立即调用-'+n);
                }
                return add;
            })();// =  }())  why ?
            b();

            //闭包传递参数
            function f(x){
                var i= 0;
                return function(){
                    return x[i++];
                }
            }
            var abc = f(['a','b','c']);
            console.log(abc());

            var ff = (function(x){
                var i = 0;
                return function(){
                    return x[i++];
                }
            }(['x','y','z']));
            console.log(ff());

            //递归
            function f6(n){
                if(n <=1 ){
                    return 1;
                }else{
                    return n * f6(n-1);
                }
            }
            f6(3);

        }

        //递归示例
        $(function(){
            var num =  $(".content .time h1").text();
            countDown(num);
            function countDown(num){
                if(num > 0){
                    setTimeout(function(){
                        num--;
                        $(".content .time h1").text(num);
                        countDown(num);
                    },1000);
                }else{

                }
            }
        })
    </script>
<style>
    .content{
        background-color: antiquewhite;
        width: 400px;
        height: 300px;
    }
    .time{
        background-color:brown;
        width: 200px;
        height: 200px;
    }
</style>
</head>
<body>
    <div class="content">
        <div class="time">
            <h1>10</h1>
        </div>
    </div>
</body>
</html>